<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <ul>
            <!-- 数组循环两个参数，前面是对象，后面是索引 -->
            <li v-for="(p,index) in person" :key="p.id">{{p.name}},{{p.age}}{{index}}</li>
            <li v-for="(a,b,c) in student">{{a}}的属性名是{{b}}{{c}}</li>
            <!-- 对象循环三个参数，前面是属性值，后面是属性名，最后是索引 -->
            <!-- 也可以循环字符串，第一个参数是字符，第二个是参数 -->
            <li v-for="(num,index) in 5">{{num}}-{{index}}</li>
            <!-- 也可以循环固定次数，第一个参数是数字1-5，后面是索引0-4 -->
        </ul>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            person:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ],
            student:{
                name:'lzt',
                age:18
            }
        }
        },
    )
    </script>
</body>
</html>